<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Bootstrap周浩</title>
  <link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">
  <style>
    .caption {
      text-align: center
    }

    .thumbunail {
      max-width: 310px;
      margin: 0 auto;
    }

    .jumbotron {
      text-align: center;
      color: white;
      background: linear-gradient(45deg, #020031, #6d3353);
    }

    .footer,
    .footer a {
      color: #777;
    }

    .footer {
      padding: 30px 0;
      border-top: 1px solid #e5e5e5;
      margin-top: 70px;
    }
  </style>
</head>

<body>
  <div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand hidden-sm" href="#"
          onclick="_hmt.push(['_trackEvent', 'navbar', 'click', 'navbar-首页'])">Bootstrap中文网</a>
      </div>
      <div class="navbar-collapse collapse" role="navigation">
        <ul class="nav navbar-nav">

          <li><a href="#" onclick="_hmt.push(['_trackEvent', 'navbar', 'click', 'v3doc'])">Bootstrap3中文文档</a></li>
          <li><a href="#" onclick="_hmt.push(['_trackEvent', 'navbar', 'click', 'v4doc'])">Bootstrap4中文文档</a></li>
          <li><a href="#" onclick="_hmt.push(['_trackEvent', 'navbar', 'click', 'sass'])">Sass 教程</a></li>
          <li><a href="#" onclick="_hmt.push(['_trackEvent', 'navbar', 'click', 'less'])">Less 教程</a></li>
          <li><a href="#" onclick="_hmt.push(['_trackEvent', 'navbar', 'click', 'jquery'])">jQuery API</a></li>
          <li><a class="reddot" href="#"
              onclick="_hmt.push(['_trackEvent', 'navbar', 'click', 'youzhan-main-nav'])">网站实例</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right hidden-sm">
          <li><a href="#" onclick="_hmt.push(['_trackEvent', 'navbar', 'click', 'about'])">关于</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="jumbotron masthead">
    <div class="container">
      <h1>Bootstrap</h1>
      <h2>简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。</h2>
      <!-- <p class="masthead-button-links">
                        <a class="btn btn-lg btn-primary btn-shadow" href="#" target="_blank" role="button" onclick="_hmt.push(['_trackEvent', 'masthead', 'click', 'masthead-Bootstrap3中文文档'])">Bootstrap3中文文档(v3.3.7)</a>
                      </p>
                      <ul class="masthead-links">
                        <li>
                          <a href="#"  role="button" onclick="_hmt.push(['_trackEvent', 'masthead', 'click', 'masthead-Bootstrap2中文文档'])">Bootstrap2中文文档(v2.3.2)</a>
                        </li>
                      </ul> -->
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        <div class="thumbnail">
          <img src="./img/1.png" alt="...">
          <div class="caption">
            <a href="#">
              <h3>优站精选</h3>
              <h5>Bootstrap 网站实例</h5>
            </a>
            <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
          </div>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        <div class="thumbnail">
          <img src="./img/2.png" alt="...">
          <div class="caption">
            <a href="#">
              <h3>Webpack</h3>
              <h5>是前端资源模块化管理和打包工具</h5>
            </a>
            <p>Webpack 它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。</p>
          </div>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        <div class="thumbnail">
          <img src="./img/3.png" alt="...">
          <div class="caption">
            <a href="#">
              <h3>React</h3>
              <h5>用于构建用户界面的 JavaScript 框架</h5>
            </a>
            <p>React 起源于 Facebook 的内部项目，是一个用于构建用户界面的 JavaScript 库。</p>
          </div>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        <div class="thumbnail">
          <img src="./img/4.png" alt="...">
          <div class="caption">
            <a href="#">
              <h3>TypeScript </h3>
              <h5>中文手册</h5>
            </a>
            <p>TypeScript 是由微软开源的编程语言。本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <footer class="footer ">
    <div class="container">
      <div class="row footer-top">
        <div class="col-md-6 col-lg-6">
          <h4>
            <img src="https://cdn.jsdelivr.net/npm/@bootcss/www.bootcss.com@0.0.44/dist/img/logo.png">
          </h4>
          <p>我们一直致力于为广大开发者提供更多的优质技术文档和辅助开发工具！</p>
        </div>
        <div class="col-md-6  col-lg-6">
          <div class="row about">
            <div class="col-sm-3">
              <h4>关于</h4>
              <ul class="list-unstyled">
                <li><a href="#">关于我们</a></li>
                <li><a href="#">广告合作</a></li>
                <li><a href="#">友情链接</a></li>
                <li><a href="#">招聘</a></li>
              </ul>
            </div>
            <div class="col-sm-3">
              <h4>联系方式</h4>
              <ul class="list-unstyled">
                <li><a href="#" title="Bootstrap中文网官方微博">新浪微博</a></li>
                <li><a href="#">电子邮件</a></li>
              </ul>
            </div>
            <div class="col-sm-3">
              <h4>旗下网站</h4>
              <ul class="list-unstyled">
                <li><a href="#">BootCDN</a></li>
                <li><a href="#">Packagist中国镜像</a></li>
              </ul>
            </div>
            <div class="col-sm-3">
              <h4>特别致谢</h4>
              <ul class="list-unstyled">
                <li><a href="#">猫云</a></li>

              </ul>
            </div>
          </div>

        </div>
      </div>
      <hr>
      <div class="row footer-bottom">
        <ul class="list-inline text-center">
          <li><a href="#"">京ICP备11008151号-6</a></li><li>京公网安备11010802014853</li>
        </ul>
      </div>
    </div>
  </footer>
  <script src=" ./jquery.js"></script>
              <script src="./bootstrap-3.3.7-dist/css/bootstrap.min.css"></script>
</body>

</html>